import {PlusOutlined} from '@ant-design/icons';
import type {ProColumns, ProDescriptionsItemProps,} from '@ant-design/pro-components';
import {ProCard, ProDescriptions, ProTable, TableDropdown,} from '@ant-design/pro-components';
import {Button, Tabs} from 'antd';
import {useState} from 'react';
import {searchUsers} from "@/services/ant-design-pro/api";


const columns: ProColumns<API.CurrentUser>[] = [
  {
    title: '序号',
    dataIndex: 'id',
    width: 64,
    valueType: 'indexBorder',
  },
  {
    title: '用户账户',
    dataIndex: 'userAccount',
    copyable: true,
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    copyable: true,
    ellipsis: true,
  },
  {
    title: '用户头像',
    dataIndex: 'avatarUrl',
    render(_, record) {
      return <img src={record.avatarUrl} alt={record.nickName} width={80}/>
    }
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    copyable: true,
  },
  {
    title: '手机号',
    dataIndex: 'phoneNumber',
    copyable: true,
  },
  {
    title: '用户状态',
    dataIndex: 'userStatus',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateTime',
  },
  {
    title: '用户角色',
    dataIndex: 'userRole',
    valueEnum: {
      0: {text: '普通角色', status: 'Default'},
      1: {
        text: '管理员',
        status: 'Success',
        color: 'red',
      },
    },

  },
  {
    title: '操作',
    valueType: 'option',
    dataIndex: 'id',
    render: (text, row) => [
      <a href={row.url} key="show" target="_blank" rel="noopener noreferrer">
        查看
      </a>,
      <TableDropdown
        key="more"
        onSelect={(key) => message.info(key)}
        menus={[
          {key: 'copy', name: '复制'},
          {key: 'delete', name: '删除'},
        ]}
      />,
    ],
  },
];

export default () => {
  return (
    <ProCard>
      <ProTable<API.CurrentUser>
        columns={columns}
        type={'table'}
        request={async (params) => {
          const userList = await searchUsers(params)
          return {
            data: userList.data,
          }
        }}
        pagination={{
          pageSize: 5,
        }}
        rowKey="id"
        dateFormatter="string"
        headerTitle="查询 Table"
        toolBarRender={() => [
          <Button key="3" type="primary">
            <PlusOutlined/>
            新建
          </Button>,
        ]}
      />
    </ProCard>
  );
};
